<template>
  <div class="fix-nav">
    <ul class="fix-order-nav" :class="toggle ? 'ne-ami' : 'ne-show'">
      <li class="flex flex-center">
        <div class="" @click="collectDialog = true">
          <a class="flex-column flex-center"
            ><i class="el-icon-star-on"></i>
            <p>收藏</p></a
          >
        </div>
      </li>
      <li @click="saveFun" class="flex flex-center">
        <div class="">
          <a class="flex-column flex-center"
            ><i class="iconfont icon-baocun"></i>
            <p>保存</p></a
          >
        </div>
      </li>
      <li @click="backFun" class="flex flex-center">
        <div class="">
          <a class="flex-column flex-center"
            ><i class="iconfont icon-fanhui"></i>
            <p>返回</p></a
          >
        </div>
      </li>
    </ul>
    <i
      class="icon ne-toggle"
      :class="toggle ? 'zk' : ''"
      @click="toggleFun"
    ></i>
    <el-dialog title="收藏信息" :visible.sync="collectDialog">
      <el-form :model="collectInfo" ref="collectInfo" label-width="100px" @submit.native.prevent>
        <el-form-item
          label="收藏模板名称"
          prop="name"
          :rules="[{ required: true, message: '收藏模板不能为空' }]"
        >
          <el-input v-model="collectInfo.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="collectDialog = false">取 消</el-button>
        <el-button type="primary" @click="collect"
          >{{btnText}}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: "FixNav2",
  data() {
    return {
      toggle: false,
      collectDialog: false,
      collectInfo: {
        name: "",
      },
      btnText:'确定'
    };
  },
  props: {},
  mounted() {},
  created() {},
  components: {},
  computed:{
      ...mapState('collect',['activeTemplateName'])
  },
  watch: {
      /* 如果已经点击模板，在做收藏弹框时将模板名称代入，并更改按钮名称 */
    activeTemplateName(val){
      // this.collectInfo.name = val
      this.$set(this.collectInfo,'name',val)
      if(val){
        this.btnText = '更新'
      }
    }
  },
  methods: {
    collect() {
      this.$refs["collectInfo"].validate((valid) => {
        if (valid) {
          this.$emit("collect", this.collectInfo);
          this.collectDialog = false;
        }
      });
    },
    toggleFun() {
      this.toggle = !this.toggle;
    },
    saveFun() {
      this.$emit("saveFun");
    },
    backFun() {
      this.$emit("backFun");
    },
  },
};
</script>

<style lang="scss" scoped>
.fix-nav {
  display: inline-block;

  .fix-order-nav {
    width: 0.8rem;
    height: 2.8rem;
    position: fixed;
    bottom: 0;
    top: 0;
    margin: auto 0;
    right: 0.1rem;
    z-index: 99;
  }

  .ne-toggle {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    //right: -.21rem;
    margin: auto;
    display: inline-block;
    width: 0.15rem;
    height: 1rem;
    //background-image: url("~@/assets/imgs/order/n-toggle.png");
    background-image: url("~@/assets/imgs/order/n-toggle-active.png");
    background-repeat: no-repeat;
    background-size: 95% auto;
    background-position: center right;
    border-radius: 50%;

    &:hover {
      background-image: url("~@/assets/imgs/order/n-toggle-active.png");
    }

    &.zk {
      background-image: url("~@/assets/imgs/order/n-toggle-zk.png") !important;
    }
  }

  .fix-order-nav {
    li {
      width: 0.8rem;
      height: 0.8rem;
      background-color: rgba(45, 51, 61, 0.3);
      border-radius: 50%;
      margin-bottom: 0.2rem;
      cursor: pointer;

      div {
        width: 0.7rem;
        height: 0.7rem;
        background-color: #2d333d;
        border-radius: 50%;

        a {
          color: #fff;
          display: block;
          width: 100%;
          height: 100%;
          min-height: 50px;
          min-width: 50px;
          text-align: center;
          position: relative;
          border: 1px solid transparent;

          i {
            display: inline-block;
            font-size: 0.22rem;
            margin-top: 0.09rem;
          }

          p {
            font-size: $fontSize_v3;
          }

          .num {
            display: block;
            font-style: normal;
            position: absolute;
            right: -0.05rem;
            top: 0;
            width: 0.22rem;
            height: 0.22rem;
            line-height: 0.22rem;
            background-color: rgba(255, 0, 0, 0.8);
            border-radius: 50%;
            text-align: center;
            font-size: 0.1rem;
          }
        }
      }

      &:hover {
        background-color: rgba(228, 117, 72, 0.3);

        div {
          background-color: $orange;
        }
      }

      &:nth-child(1) {
        i.iconfont {
          font-size: 0.22rem;
        }

        p {
          position: relative;
          //top:-.04rem;
        }
      }

      &:nth-child(2) {
        i.iconfont {
          font-size: 0.19rem;
          margin-top: 0.08rem;
        }

        p {
          position: relative;
          top: 0.01rem;
        }
      }

      &:nth-child(3) {
        i.iconfont {
          font-size: 0.16rem;
          margin-top: 0.1rem;
        }
      }

      &:nth-child(4) {
        i.iconfont {
          font-size: 0.18rem;
          margin-top: 0.08rem;
        }
      }

      &.active {
        background-color: rgba(228, 117, 72, 0.3);

        div {
          background-color: $orange;
          color: #fff;
        }
      }
    }
  }

  @keyframes move {
    0% {
      right: 0.2rem;
      opacity: 1;
    }
    100% {
      right: -1rem;
      opacity: 0;
    }
  }
  @keyframes zk {
    0% {
      right: -1rem;
      opacity: 0;
    }
    100% {
      right: 0.2rem;
      opacity: 1;
    }
  }

  .ne-ami {
    right: -1rem;
    -webkit-animation-name: move;
    animation-name: move;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }

  .ne-show {
    right: 0.2rem;
    -webkit-animation-name: zk;
    animation-name: zk;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }
}
</style>
